<template>
	<view class="add-car-page">
		<view class="content">
			<view style="padding:30rpx 0 40rpx 0;text-align: center;">
				<text class="title">车牌号码</text>
			</view>
			<car-number-input v-if="form.id" :defaultStr="form.car_no"
				@numberInputResult="numberInputResult"></car-number-input>
			<car-number-input v-else :defaultStr="form.car_no"
				@numberInputResult="numberInputResult"></car-number-input>
			<view class="flex jus-b ali-c" style="margin-top: 40rpx;">
				<text>默认车辆</text>
				<switch color="#F94D29" :checked="form.isdefault == 1" @change="changeDefault" />
			</view>
		</view>
		<view class="carlist" v-for="(item, index) in carlist" :key="index" @click="toDetail(item)">
			<view>
				{{ item.car_no }}
			</view>
			<view style="font-size: 28rpx;">点击查询缴费</view>
			<image src="../../static/lj.png" @click.stop="editdel(item)"></image>
		</view>
		<view @click="$navigateTo('/pages/carrecord/carrecord')" style="padding: 20rpx;color: gray;text-align: center;">
			停车记录
			<uni-icons type="right" color="" size="14" />
		</view>
		<view class="add-button">
			<view @click="bangcar()">绑定车辆</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carlist: [],
				form: {
					car_no: '',
					isdefault: 0
				},
				scene: '',
				info: {},
			}
		},
		onLoad(option) {
			console.log(option, 'option')
			if (option.car) {
				this.form = JSON.parse(option.car)
				console.log(this.form);
			}
			if (option.scene) {
				this.scene = option.scene
			}
			
		},
		onShow() {
			this.getcarlist()
		},
		methods: {
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/cartime/cartime?car_no=' + item.car_no
				})
			},
			//删除
			editdel(item) {
				uni.showModal({
					title: '提示',
					content: '确定删除吗？',
					success: (res) => {
						if (res.confirm) {
							this.$http({
								url: 'api/Wechat/del_user_car',
								data: {
									id: item.id
								}
							}).then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								this.getcarlist()
							})
						}
					}
				});
			},
			changeDefault({
				detail: {
					value
				}
			}) {
				this.form.isdefault = value ? 1 : 0
			},
			numberInputResult(e) {
				this.form.car_no = e
			},
			// async getInfo(car_no) {
			// 	let { data } = await this.$http({
			// 		url: 'api/wechat/payBindCar',
			// 		data: {
			// 			car_no: car_no,
			// 			key:this.scene
			// 		}
			// 	})
			// 	this.info = data
			// },
			bangcar() {
				if (this.form.car_no.length < 7) {
					uni.showToast({
						title: '请输入完整车牌',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '提交中'
				})
				let form = JSON.parse(JSON.stringify(this.form))
				form.car_no = form.car_no.split(' ').filter(item => item != '').join('')
				this.$http({
					url: 'api/wechat/payBindCar',
					data: {
						car_no: form.car_no,
						key: this.scene
					}
				}).then(res => {
					uni.hideLoading()
					// uni.showToast({
					// 	title: res.msg,
					// 	icon: 'none'
					// })
					// this.getcarlist()
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/cartime/cartime?car_no=' + form.car_no+'&key=' + this.scene
						})
					}, 500)
				})
			},
			getcarlist() {
				this.$http({
					url: 'api/Wechat/userCarList'
				}).then(res => {
					this.carlist = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.add-car-page {
		// min-height: 100vh;
		background-color: #f5f5f5;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;

		.content {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			padding: 24rpx;
			padding-bottom: 40rpx;
		}

		.title {
			font-size: 36rpx;
			font-weight: 500;
		}

		.car-input-item {
			border-radius: 10rpx;
			background-color: #f7f4f4;
			border: none !important;

			.sel-item-line {
				background: #F94D29 !important;
			}
		}

		.add-button {
			width: 750rpx;
			height: 110rpx;
			background-color: #f5f5f5;
			position: fixed;
			bottom: 30rpx;

			>view {
				margin-top: 10rpx;
				width: 690rpx;
				height: 96rpx;
				background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
				border-radius: 83rpx 83rpx 83rpx 83rpx;
				opacity: 1;
				color: white;
				line-height: 96rpx;
				text-align: center;
				font-weight: 500;
			}

			// margin-bottom: env(safe-area-inset-bottom);


		}

		.carlist {
			width: 650rpx;
			padding: 0 20rpx;
			margin: 20rpx auto 0 auto;
			background-color: #FFF;
			height: 126rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 36rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			align-items: center;

			image {
				width: 34rpx;
				height: 37rpx;
			}
		}
	}
</style>